<template>
  <div class="shop">
    <el-image
      style="width: 100%; height: 250px"
      :src="require('../assets/2.png')"
      fit="cover"
    ></el-image>
    <div class="shops">
      <div class="flex">
        <div class="flex_title">扶贫商品</div>
        <!-- <div class="flex_more">查看更多 <i class="el-icon-arrow-right"></i></div> -->
      </div>
      <el-row :gutter="30">
        <el-col
          :xs="12"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="6"
          v-for="(item, index) in tableData"
          :key="index"
          @click.native="details(item.id)"
        >
          <el-card
            shadow="always"
            :body-style="{ padding: '0px' }"
            style="margin-top: 20px"
          >
            <el-image :src="item.url" class="image" fit="cover"> </el-image>
            <div style="padding: 14px">
              <span>{{ item.name }}</span>
              <div class="bottom">
                <div class="time">￥ {{ item.price }}</div>
                <el-button type="text" class="button">购买</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
        >
        </el-pagination>
      </div>
    </div>

    <el-backtop></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 10,
      pageNo: 1,
      pageSize: 8,
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleCurrentChange(pageNo) {
      console.log(pageNo);
      this.pageNo = pageNo;
      this.getData();
    },
    //详情
    details(event) {
      console.log(event);
      this.$router.push({
        path: "/shopdetails",
        query: {
          id: event,
        },
      });
    },
    getData() {
      this.$http
        .postRequest("main/sale/show/list", {
          search: "",
          pNum: this.pageNo,
          pSize: this.pageSize,
        })
        .then((res) => {
          if (res.code === 0) {
            this.tableData = res.data;
            this.total = res.totalSize;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  // html加载完成后执行。
  mounted() {},
};
</script>

<style scoped>
.shops {
  width: 80%;
  margin: auto;
  padding-bottom: 30px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.flex_title {
  font-size: 20px;
  font-weight: 600;
}

.flex_more {
  color: #aeaeae;
}

.time {
  font-size: 13px;
  color: #999;
  padding: 10px 0;
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
